<template>
  <label :class="['xx-checkbox', { 'xx-checkbox__disabled': disabled }]">
    <input type="checkbox" :disabled="disabled" :checked="checked" @change="$emit('change', $event.target.checked)" />
    <i :class="['iconfont', checked ? 'icon-checkbox' : 'icon-uncheckbox']"></i>
    <span v-if="!!label">{{ label }}</span>
    <slot v-else></slot>
  </label>
</template>

<script lang="ts">
import { Component, Model, Prop } from 'vue-property-decorator';
import { VueComponent } from '@/vue/vue-component';

@Component({
  name: 'xx-checkbox'
})
export default class XxCheckbox extends VueComponent {
  @Prop(String) label?: string;
  @Prop(Boolean) disabled?: boolean;
  @Model('change', { type: Boolean, default: false }) checked!: boolean;
}
</script>

<style lang="less">
@import '~@/assets/styles/variables.less';

.xx-checkbox {
  height: 20px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;

  input {
    display: none;
  }

  i {
    font-size: 16px;
    margin-right: 3px;
    transition: all 0.2s;
  }

  &:hover {
    .icon-uncheckbox {
      color: @color-primray;
    }
  }

  .icon-checkbox {
    color: @color-primray;
  }

  &__disabled {
    color: @global-font-disabled-color;
    cursor: not-allowed;
  }
}
</style>
